<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始答题</title>
</head>
<script src="../static/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(function (){
        $('#next').click(function (){
            var choce = document.querySelectorAll('input[type="checkbox"]');
            var answer1=[]
            for (var i = 0; i < choce.length; i++) {
                if (choce[i].checked) {
                    answer1.push(1)
                } else {
                    answer1.push(0)
                }
            }
            //load是上面的button的id，这里代表点一下的操作
            $.ajax({
                url:'/getscore',                     //从gettime这个视图函数获取数据，一会编写
                type:'post',                         //采用get方法
                data: {'a':answer1[0],'b':answer1[1],'c':answer1[2],'d':answer1[3]},
                dataType: 'json',
                success:function (re) {               //成功之后的结果，这里的t是从'/gettime'视图函数获得的返回值，如果返回值有多个，可以用json
                    //var checkboxes = document.getElementsByName('chose');
                    //for (var i = 0; i < checkboxes.length; i++) {
                        //checkboxes[i].checked = false;
                    //}
                    $('#score').html(re.goal);
                    $('#A').html(re.sample[0]);//选项文本重新渲染后端传来的题目
                    $('#B').html(re.sample[1]);
                    $('#C').html(re.sample[2]);
                    $('#D').html(re.sample[3]);
                    var choce = document.querySelectorAll('input[type="checkbox"]');
                    for (var i = 0; i < choce.length; i++) {
                        choce[i].checked=false;//将选项取消打钩
                    }
                }
            })
        })
    })
</script>
<body>
<h1 align='center'>测试题</h1>
<div style="height:100% ;display: flex;justify-content: space-around; position: fixed;top: 10%;left: 0;right: 0;margin: 0 auto;">
        <div style="width: 20%;height: 100%; background-color: darkgray">
            <h1 align='center'>当前分数</h1><h1 align='center' id="score">{{ result.goal }}</h1><br />
        </div>
        <div style="width: 60%;height: 100%; background-color: lightgrey" >
            <form align='center' name="form1" id="form1">
                <input type="checkbox" name="chose1" value="0"/><h2 id="A">{{ result.sample[0] }}</h2>
                <input type="checkbox" name="chose2" value="1"/><h2 id="B">{{ result.sample[1] }}</h2>
                <input type="checkbox" name="chose3" value="2"/><h2 id="C">{{ result.sample[2] }}</h2>
                <input type="checkbox" name="chose4" value="3"/><h2 id="D">{{ result.sample[3] }}</h2>
                <input type="button"  id="next" value="下一题" >
                <!-- 重置按钮 -->
            </form>
        </div>
        <div style="width: 20%;height: 100%; background-color: darkgray" >
            <h1>下一题倒计时</h1>
            <h1 id="countdown">10</h1>
        </div>
</div>
<script>
    var countdownInterval;
    var countdown = 10;//全局变量
    function startCountdown() {
      var countdownElement = document.getElementById("countdown");
      var nextbtn=document.getElementById("next");
      countdown=10;//重置倒计时
      countdownElement.innerText = countdown;
      // setInterval 函数不刷新页面的情况下更新 DOM 元素
      countdownInterval = setInterval(function() {//setInterval是函数定时器，在指定间隔时间内重复执行传入的函数。
        countdown--;
        countdownElement.innerText = countdown;//将倒计时实时渲染到页面

        if (countdown === 0) {
          clearInterval(countdownInterval);//清除当前时钟
          nextbtn.click();//倒计时结束后触发下一题按钮
        }
      }, 1000);//一秒钟一次
    }

    function restartCountdown() {
      clearInterval(countdownInterval);//重新开始倒计时的开关
      startCountdown();
    }

    startCountdown();

    document.getElementById("next").addEventListener("click", restartCountdown);
</script>
</body>
</html>